<template>
	<view class="padd-box">
		<view class="nav-box flexWrap">
			<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==0}" @tap="changeNav(0)">
				<text>保洁管理</text>
				<text class="line"></text>
			</view>
			<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==1}" @tap="changeNav(1)">
				<text>打扫日志</text>
				<text class="line"></text>
			</view>
		</view>
		<view class="clean-box" v-if="currmentIndex==0">
			<view class="clean-item" v-for="(item,index) in dataList" :key="index">
				<view class="clean-top flexWrap">
					<view class="info"><text>{{item.name}}</text> {{item.telephone}}</view>
					<view class="call-btn" @tap="makePhoneCall(item.telephone)">点击拨打</view>
				</view>
				<view class="connect-box flexWrap">
					<view class="connect-dot"></view>
					<view class="connect-dot"></view>
				</view>
				<view class="clean-cont">
					<view class="clean-info">
						<view class="clean-name">上岗时间</view>
						<view class="info-item">
							<text v-for="(i,k) in item.startdata" :key="k">{{i}}</text>
						</view>
					</view>
					<view class="clean-info">
						<view class="clean-name">定时打扫任务</view>
						<view class="info-item">
							<text v-for="(i,k) in item.cleaning" :key="k">{{i.time}}</text>
						</view>
					</view>
					<view class="clean-info">
						<view class="clean-name">包房打扫任务</view>
						<view class="info-item">
							<text>{{item.equipment_name}}</text>
						</view>
					</view>
					<view class="bottom-box flexWrapNo">
						<switch style="scale: .6;" color="#353484" :checked="item.startup_status==1" @tap="cleaningChange(item.id,index)"></switch>
						<text>备注:取消启用后,保洁开门链接将失效</text>
					</view>
				</view>
			</view>
			<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
			<view class="empty-box" v-if="showEmpty">
				<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
			</view>
		</view>
		<view class="log-box" v-if="currmentIndex==1">
			<view class="log-item" v-for="(item,index) in logList" :key="index">
				<view class="log-name">{{item.type==1?'[定时打扫]':'[包房打扫]'}}</view>
				<view class="log-text">{{item.content}}</view>
			</view>
			<view class="empty-box" v-if="logList.length==0">
				<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				currmentIndex:0,
				//下拉刷新
				page: 1,
				size:10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
				dataList:[],
				logList:[]
			};
		},
		onLoad() {
			this.getData();
			this.getCleaningLog();
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getData()
			}
		},
		methods:{
			// 拨打电话
			makePhoneCall(phoneNumber) {
				let that = this
				uni.makePhoneCall({
					phoneNumber:phoneNumber
				})
			},
			changeNav(index){
				this.currmentIndex=index
			},
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.dataList = []
				this.getData();
			},
			// 打扫日志
			getCleaningLog(){
				this.$request.post(this.$api.cleaningLog,{
					store_id:uni.getStorageSync('store_id'),
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						let {
							data = {}
						} = res;
						this.logList=data
					}
				})
			},
			// 改变状态
			cleaningChange(id,index){
				this.$request.post(this.$api.cleaningChange,{
					id
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						
					}
				})
			},
			// 获取保洁数据
			getData(){
				let self=this
				this.$tools.loadIng()
				this.$request.post(this.$api.cleaningList, {
					store_id:uni.getStorageSync('store_id'),
					page:this.page++,
					num:this.size
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray =data
						if (newArray.length == 0 && self.page == 2) {
							self.showEmpty = true
							self.showLoadStatus = false
							self.more = false // 不能再次请求了
							return false;
						} else {
							self.showLoadStatus = true
							self.more = true
							self.showEmpty = false
							self.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							self.status = 'noMore'
							self.more = false
							self.showEmpty = false
						}
						self.dataList=self.dataList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.padd-box{
		padding: 36rpx;
	}
	.empty-box{
		width: 476upx;
		height: 280upx;
		margin:250upx auto;
	}
	.nav-box{
		padding: 0 180rpx;
		.nav-item{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #82819B;
			.line{
				display: inline-block;
				width: 94rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}
		.active{
			color: #fff;
			.line{
				background: #26BCFD;
			}
		}
	}
	.clean-box{
		margin-top: 28rpx;
		.clean-item{
			position: relative;
			margin-bottom: 20rpx;
			.clean-top{
				height: 88rpx;
				background: #353484;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 0 28rpx;
				.info{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text{
						font-size: 36rpx;
						margin-right: 28rpx;
					}
				}
				.call-btn{
					width: 112rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #FFFFFF;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
			.connect-box{
				padding: 0 112rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 76rpx;
				.connect-dot{
					width: 14rpx;
					height: 26rpx;
					background: #5151B2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #0C166F;
				}
			}
			.clean-cont{
				height: 500rpx;
				background: #1D1C5C;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 4rpx;
				padding: 28rpx;
				.clean-info{
					border-bottom:1rpx solid #2F2E84;
					padding-bottom: 30rpx;
					margin-bottom: 28rpx;
					.clean-name{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C8CAC;
					}
					.info-item{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 12rpx;
						text{
							margin-right: 48rpx;
						}
					}
				}
				.bottom-box{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color:#8E8EAE;
				}
			}
		}
	}
	.log-box{
		margin-top: 30rpx;
		.log-item{
			padding-bottom: 30rpx;
			padding-top: 22rpx;
			border-top: 1rpx solid #36355E;
			.log-name{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.log-text{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				margin-top: 16rpx;
				line-height: 40rpx;
			}
		}
	}
</style>
